<template>
    <div style="padding: 20px;">
        <div :class="settings.worktime.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.worktime.stat = 1-settings.worktime.stat&1">
                <span style="font-weight: bold;">上班时间</span>
                <span v-if="settings.worktime.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
                <span v-if="settings.worktime.stat == 1" style="font-size: 12px;margin-left: 8px;">已启用</span>
                <i v-if="settings.worktime.stat == 1" @click.stop="addWorktime"
                   style="color: #ffffff;margin-left: 8px;cursor: pointer;" class="fa fa-plus"></i>
            </div>
            <div v-if="settings.worktime.stat == 1" class="time-list">
                <template v-for="(time,index) in settings.worktime.config">
                    <div class="time-item" >
                        <div class="weekday">
                            <label><input type="checkbox" v-model="time.weekday[0]">星期日</label>
                            <label><input type="checkbox" v-model="time.weekday[1]">星期一</label>
                            <label><input type="checkbox" v-model="time.weekday[2]">星期二</label>
                            <label><input type="checkbox" v-model="time.weekday[3]">星期三</label>
                            <label><input type="checkbox" v-model="time.weekday[4]">星期四</label>
                            <label><input type="checkbox" v-model="time.weekday[5]">星期五</label>
                            <label><input type="checkbox" v-model="time.weekday[6]">星期六</label>
                        </div>
                        <div class="time">
                            <select v-model="time.time[0]">
                                <option :value="n-1" v-for="n in 24">
                                    {{n<=10?'0'+(n-1):n-1}}
                                </option>
                            </select>
                            :
                            <select v-model="time.time[1]">
                                <option :value="n-1" v-for="n in 60">
                                    {{n<=10?'0'+(n-1):n-1}}
                                </option>
                            </select>
                            <span>至</span>
                            <select v-model="time.time[2]">
                                <option :value="n-1" v-for="n in 24">
                                    {{n<=10?'0'+(n-1):n-1}}
                                </option>
                            </select>
                            :
                            <select v-model="time.time[3]">
                                <option :value="n-1" v-for="n in 60">
                                    {{n<=10?'0'+(n-1):n-1}}
                                </option>
                            </select>
                        </div>
                        <div class="tool" v-if="settings.worktime.config.length > 1" style="margin-top: 16px;">
                            <a style="font-size: 12px;" @click="removeWorktime(index)"><i class="fa fa-remove"></i> 删除</a>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div :class="settings.autoReply.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.autoReply.stat = 1-settings.autoReply.stat&1">
                <span style="font-weight: bold;">自动回复</span>
                <span v-if="settings.autoReply.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
                <span v-if="settings.autoReply.stat == 1" style="font-size: 12px;margin-left: 8px;">已启用</span>
            </div>
            <div v-if="settings.autoReply.stat == 1">
                <textarea v-model="settings.autoReply.config" class="setting-item" style="width: 100%;;max-height: 120px;min-height: 120px;overflow: auto;resize: none;"></textarea>
            </div>
        </div>

        <div :class="settings.autoAdmit.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.autoAdmit.stat = 1-settings.autoAdmit.stat&1">
                <span style="font-weight: bold;">自动接待</span>
                <span v-if="settings.autoAdmit.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
                <span v-if="settings.autoAdmit.stat == 1" style="font-size: 12px;margin-left: 8px;">已启用</span>
            </div>
            <div v-if="settings.autoAdmit.stat == 1"
                 class="setting-item">
                <label><input name="autoAdmit" v-model="settings.autoAdmit.config" value="1" type="radio">无论何时</label>
                <label><input name="autoAdmit" v-model="settings.autoAdmit.config" value="2" type="radio">上班时间内</label>
                <label><input name="autoAdmit" v-model="settings.autoAdmit.config" value="3" type="radio">在线时</label>
                <label><input name="autoAdmit" v-model="settings.autoAdmit.config" value="4" type="radio">离开时</label>
            </div>
        </div>

        <div :class="settings.autoTransfer.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.autoTransfer.stat = 1-settings.autoTransfer.stat&1">
                <span style="font-weight: bold;">接受转接</span>
                <span v-if="settings.autoTransfer.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
                <span v-if="settings.autoTransfer.stat == 1" style="font-size: 12px;margin-left: 8px;">已启用</span>
            </div>
        </div>

        <div :class="settings.quickReply.stat == 1?'open':''" class="setting-tab">
            <div @click="settings.quickReply.stat = 1-settings.quickReply.stat&1">
                <span style="font-weight: bold;">快捷回复(最多6条)</span>
                <span v-if="settings.quickReply.stat == 0" style="font-size: 12px;margin-left: 8px;">未启用</span>
                <span v-if="settings.quickReply.stat == 1" style="font-size: 12px;margin-left: 8px;">已启用</span>
            </div>
            <div v-if="settings.quickReply.stat == 1"
                 class="setting-item" style="cursor: auto;max-height: 300px;overflow: auto;">
                <div>
                    <input @keydown.13="enterQuickReply($event)" style="border: none;border-radius: 4px;box-shadow: 0px 0px 15px 1px #41a1b7;padding: 8px;width: 100%;" placeholder="请输入快捷回复">
                </div>
                <template v-if="settings.quickReply.config.length > 0" >
                    <div style="margin-top: 16px;padding:0 8px;border: 1px solid #dfdfdf;border-radius: 4px;">
                        <div v-for="(text,index) in settings.quickReply.config" style="padding: 8px 0;" :style="{borderTop:index == 0?'none':'1px solid #dfdfdf'}"><span style="font-weight: 900;font-size: 12px;">{{index+1}}. </span>{{text}}<span @click="settings.quickReply.config.splice(index,1)" style="color: #d73333;margin-left: 8px;cursor: pointer;" class="fa fa-remove"></span></div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>

    export default{
        data(){
            return {
                settings: {
                    worktime: {
                        stat: 0,
                        config: [
                        ]
                    },
                    autoReply: {
                        stat: 0,
                        config: ""
                    },
                    autoAdmit: {
                        stat: 0,
                        config: 0
                    },
                    autoTransfer: {
                        stat: 0,
                        config: 0
                    },
                    quickReply: {
                        stat: 0,
                        config: []
                    }

                }
            }
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            enterQuickReply:function (event) {
                let value = event.target.value;
                if(this.settings.quickReply.config.length < 6){
                    this.settings.quickReply.config.push(value);
                    event.target.value = '';
                }
            },
            removeWorktime:function (index) {
                this.settings.worktime.config.splice(index,1);
            },
            addWorktime: function ($event) {
                this.settings.worktime.config.push({time: this.convertTime(0, 0), weekday: this.convertWeekday(0)})
            },
            convertWeekday: function (_weekday) {
                const weekday = [];
                for (let i = 0; i < 7; i++) {
                    if ((_weekday & (1 << i)) == 0) {
                        weekday.push(false);
                    } else {
                        weekday.push(true);
                    }
                }
                return weekday;
            },
            convertTime: function (start, end) {
                const time = [];
                time.push(parseInt(start / 60));
                time.push(start % 60);
                time.push(parseInt(end / 60));
                time.push(end % 60);
                return time;
            }
        },
        mounted: function () {
            const that = this;
            $.post('/setting/base/find',{},function (result) {
                const settings = result;
                if(settings.worktime){
                    for(let i = 0;i<settings.worktime.config.length;i++){
                        settings.worktime.config[i].weekday = that.convertWeekday(settings.worktime.config[i].weekday);
                        settings.worktime.config[i].time = that.convertTime(settings.worktime.config[i].start,settings.worktime.config[i].end);
                    }
                    that.settings.worktime = settings.worktime;
                }
                if(settings.autoReply){
                    that.settings.autoReply = settings.autoReply;
                }
                if(settings.autoAdmit){
                    that.settings.autoAdmit = settings.autoAdmit;
                }
                if(settings.autoTransfer){
                    that.settings.autoTransfer = settings.autoTransfer;
                }
                if(settings.quickReply){
                    that.settings.quickReply = settings.quickReply;
                }
            });
        },
        watch:{
            'settings.worktime':{
                handler:function(worktime){
                    let request = {};
                    if(worktime.stat == 1){
                        const work = {stat:worktime.stat,config:[]};
                        for(let i = 0;i<worktime.config.length;i++){
                            const time = worktime.config[i];
                            let weekday = 0;
                            for(let j = 0;j<time.weekday.length;j++){
                                const ret = time.weekday[j];
                                if(ret){
                                    weekday |= 1<<j;
                                }
                            }
                            const update = {
                                weekday:0,
                                start:0,
                                end:0
                            };
                            const start = time.time[0] * 60 + time.time[1];
                            const end = time.time[2] * 60 + time.time[3];
                            update.weekday = weekday;
                            update.start = start;
                            update.end = end;
                            work.config.push(update);
                        }
                        request = work;
                        request.config = JSON.stringify(request.config);
                    }else{
                        request = {stat:worktime.stat};
                    }
                    request['name'] = 'worktime';
                    $.post('/setting/base/update',request,function (result) {

                    });
                },
                deep:true
            },
            'settings.autoReply':{
                handler:function(autoReply){
                    let request = {stat:autoReply.stat};
                    if(autoReply.stat == 1){
                        request.config = autoReply.config;
                    }
                    request['name'] = 'autoReply';
                    $.post('/setting/base/update',request,function (result) {

                    });
                },
                deep:true
            },
            'settings.autoAdmit':{
                handler:function(autoAdmit){
                    let request = {stat:autoAdmit.stat};
                    if(autoAdmit.stat == 1){
                        request.config = autoAdmit.config;
                    }
                    request['name'] = 'autoAdmit';
                    $.post('/setting/base/update',request,function (result) {

                    });
                },
                deep:true
            },
            'settings.autoTransfer':{
                handler:function(autoTransfer){
                    let request = {stat:autoTransfer.stat};
                    if(autoTransfer.stat == 1){
                        request.config = autoTransfer.config;
                    }
                    request['name'] = 'autoTransfer';
                    $.post('/setting/base/update',request,function (result) {

                    });
                },
                deep:true
            },
            'settings.quickReply':{
                handler:function(quickReply){
                    let request = {stat:quickReply.stat};
                    if(quickReply.stat == 1){
                        request.config = JSON.stringify(quickReply.config);
                    }
                    request['name'] = 'quickReply';
                    $.post('/setting/base/update',request,function (result) {

                    });
                },
                deep:true
            },
        }
    }

</script>

<style scoped>
    .setting-tab:first-child {
        margin-top: 0;
    }
    .setting-tab.open {
        color:rgb(247, 247, 247);
        background: #41a1b7;
        border: 1px solid #41a1b7;
    }
    .setting-tab {
        width:100%;
        max-width: 800px;
        cursor: pointer;
        margin-top: 16px;
        border-radius: 4px;
        padding: 12px;
        border: 1px solid #d8d8d8;
        background:rgb(247, 247, 247);
        color: #a4a4a4;
    }
    .setting-tab label {
        margin:0;
    }
    .time-item,.setting-item{
        background-color: white;padding: 12px;margin-top: 16px;color: #555;
        border-radius: 4px;
    }
    .time-item:first-child{
        margin-top: 8px;
    }
    .time-item:last-child{
        margin-bottom: 8px;
    }
</style>